<template>
    <div id="word-input" class="word-input">
<!--    <span>{{moduleData}}</span>-->
      <el-descriptions title="用户信息">
        <el-descriptions-item label="用户名">{{$store.state.user.user.username}}</el-descriptions-item>
        <el-descriptions-item label="学生名称">{{$store.state.sportStudent.studentUser.studentName}}</el-descriptions-item>
        <el-descriptions-item label="入学年份">{{$store.state.sportStudent.studentUser.schoolDate}}</el-descriptions-item>
        <el-descriptions-item label="班级">
          <el-tag size="small">{{$store.state.sportStudent.studentUser.className}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="小组">{{$store.state.sportStudent.studentUser.groupName}}</el-descriptions-item>
      </el-descriptions>

      <el-table :data="moduleData.wordDataResList" border>

        <el-table-column label="中文">
          <template slot-scope="scope">
            <!-- 编辑显示-->
<!--            <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.wordChinese"></el-input>-->
            <!-- 查看显示-->
            <span>{{scope.row.wordChinese}}</span>
          </template>
        </el-table-column>

        <el-table-column label="英语">
          <template slot-scope="scope">
            <el-input placeholder="请输入内容" v-model="scope.row.wordInput"></el-input>
<!--            <span v-show="!scope.row.show">{{scope.row.wordEnglish}}</span>-->
          </template>
        </el-table-column>

      </el-table>
           <el-button @click="breakAction">返回</el-button>
           <el-button @click="saveData">提交</el-button>
    </div>
</template>

<script>
  import ElementUI from "element-ui";
  import Bus from '../course/bus';
  import {mapState} from "vuex";
  export default {
    name: "word-input",
    // props: {
    //   wordModuleId :{type :String,require: true}
    // },
    data() {
      return {
      }
    },
    methods :{
      breakAction(){
        this.$router.push('/course/course')
      },
      saveData(){
        let sendData = {
           studentId:this.$store.state.sportStudent.studentUser.id,
           wordModuleId:this.moduleData.id,
           wordDataRestList:this.moduleData.wordDataResList,
        }
        // console.log(JSON.stringify(sendData));
        // return
        this.$store.dispatch("wordCheck/saveWordCheckData", sendData).then((res) => {
          ElementUI.Message({
            message: '保存完成',
            type: 'success'
          });
          //跳转到听写结果界面
          this.breakAction()
          //刷新数据
          this.$nextTick(function () {
            //刷新页面数据
            Bus.$emit('toWordCheckRefreshAction');
          });

        }).catch((e) => {
          console.log(e)
        });

      }
    },
    computed:{
      //映射 sportStudent模块下的 studentUser对象
      ...mapState('wordModule', ['moduleData'])
    },
    created() {
    }

  }
</script>

<style scoped>
  #word-input {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 2px;
    background-color: #f5f2f1;
  }
</style>

